<!--  -->
<template>
    <div class="Fill-Unified-Password-con">
    <div class="declare-data-item">
      <a-form-model :layout="'inline'" :model="form" v-bind="formItemLayout">
        <a-form-model-item label="统一密码">
          <a-input v-model="form.password" placeholder="请输入密码" style="width: 100%;" />
        </a-form-model-item>

        <a-form-model-item :wrapperCol="{span: 24 }">
          <a-button type="primary" @click="queryEvent">  使用 </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="declare-data-item">
      <a-table :columns="NotReported.columnsAll" :data-source="NotReported.tableData" bordered  >
        <span slot="pwd" slot-scope="text, record">
          <a-input :disabled="record.pwd.disabled" v-model="record.pwd.val" placeholder="请输入密码" style="width: 100px;" />
        </span>
        <div slot="action" slot-scope="text, record" style="text-align: left;">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{record.action.msg||''}}</span>
            </template>
            <a-tag :color="NotReported.tagConfig[record.action.state].color">{{NotReported.tagConfig[record.action.state].label}}</a-tag>
          </a-tooltip>
          <a-button v-if="record.action.isEdit" type="link" @click="editEvent(record)"> 修改 </a-button>
          <a-button v-if="record.action.isDelete" type="link" @click="deleteEvent(record)"> 删除 </a-button>
        </div>
      </a-table>
    </div>

    <div class="declare-data-item btn-group">
      <a-button v-if="isVerifyPassword == false" type="primary" @click="VerifyPasswordEvent">校验密码</a-button>
      <a-button v-if="isVerifyPassword == true" type="primary" @click="okEvent">提交企业</a-button>
      <a-button @click="closeEvent_" type="link">返回上一步</a-button>
    </div>
  </div>
</template>

<script>
import tableConfig from './utils/tableConfig'
import getDataDB from '@/api/InvoiceIssuer.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'FillUnifiedPassword',
  components: {},
  props: {
    closeEvent: {
      type: Function,
    },
    Setloading: {
      type: Function,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      formItemLayout: { labelCol: { span: 8 }, wrapperCol: { span: 16 } },
      form:{
        password: ''
      },
      NotReported: {
        tagConfig:{ '0':{color:'',label:'待校验'},'1':{color:'#87d068',label:'校验成功'},'2':{color:'#f50',label:'校验失败'},'-1':{color:'orange',label:'校验中'}},
        // state 0 未校验  1 校验成功  2 校验失败
        tableData: [
          // {key:'1', name:'1', pwd:{ val:"", disabled:false}, action:{state:'0', isEdit:false, isDelete: false}},
          // {key:'2', name:'2', pwd:{ val:"", disabled:false}, action:{state:'0', isEdit:false, isDelete: false}},
          // {key:'3', name:'3', pwd:{ val:"", disabled:false}, action:{state:'0', isEdit:false, isDelete: false}}
        ],
        columnsAll: tableConfig('FillUnifiedPassword'),
      },
      isVerifyPassword: false
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    data: {
      handler(val) {
        if(!this.isType.isNullOrUnDef(val) && !this.isType.isEmpty(val)){
          this.setTableData(val)
        }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    setTableData(dataList){
      const tempArr = []
      const {table} = dataList
      table.forEach(item=>{
        tempArr.push({...item,pwd:{ val:"", disabled:false}, action:{state:'0', msg: '', isEdit:false, isDelete: false}})
      })
      this.NotReported.tableData = tempArr
    },
    VerifyPasswordEvent() {
      // 全部校验成功后显示 提交企业 按钮

      const param = []
      let isHas = true
      this.NotReported.tableData.forEach(item=>{
        // state 0 未校验  1 校验成功  2 校验失败
        if(item.action.state == '-1' || item.action.state == '0'|| item.action.state == '2'){
          if(this.isType.isEmpty(item.pwd.val)){
            isHas = false
          }
          param.push({
            idCard:this.data.cardNum,
            entId:item.entId,
            password: item.pwd.val,
            phone:this.data.phone,
            source:'2', // 管理端  2   企业端 1
            type: '2'
          })
        }
        item.pwd.disabled = true
        item.action.state = '-1'

      })
      if(isHas == false) {
        this.$message.warning('密码不能为空')
        return false
      }
      console.log('校验电子税务局密码 + 响应数组结果 param===========>', param);
      getDataDB('校验电子税务局密码 + 响应数组结果',param).then(res=>{
        // console.log('校验电子税务局密码 + 响应数组结果===========>', res);
        // this.isVerifyPassword = true
        if (res.success== true){
          const tempArr = [...this.NotReported.tableData]
          let isverify = true
          res.result.forEach(r_ => {
            const {entId, verify, message} = r_
            tempArr.forEach(item => {
              if(item.entId == entId){
                item.action.state = verify=== true ? '1' : '2'
                item.action.msg = message
                item.action.isEdit = !verify
                item.action.isDelete = !verify
                if (!verify) {
                  isverify = false
                }
              }
            })
          })
          this.isVerifyPassword = isverify
          this.NotReported.tableData = tempArr
          console.log('===========isverify==========================>',isverify);
        } else {
          this.$message.warning(res.message);
        }
        // this.NotReported.tableData.forEach((item, index)=>{
        //   if(index == 0){
        //     // item.pwd.disabled = true
        //     item.action.state = '1'
        //   }
        //   if(index == 1){
        //     // item.pwd.disabled = true
        //     item.action.state = '2'
        //     item.action.isEdit = true
        //     item.action.isDelete = true
        //   }
        //   if(index == 2){
        //     // item.pwd.disabled = true
        //     item.action.state = '2'
        //     item.action.isEdit = true
        //     item.action.isDelete = true
        //   }
        // })
      })
      // setTimeout(()=>{
      //   this.NotReported.tableData.forEach((item, index)=>{
      //     if(index == 0){
      //       // item.pwd.disabled = true
      //       item.action.state = '1'
      //     }
      //     if(index == 1){
      //       // item.pwd.disabled = true
      //       item.action.state = '2'
      //       item.action.isEdit = true
      //       item.action.isDelete = true
      //     }
      //     if(index == 2){
      //       // item.pwd.disabled = true
      //       item.action.state = '2'
      //       item.action.isEdit = true
      //       item.action.isDelete = true
      //     }
      //   })
      // },5000)

    },
    okEvent(){
      // 提交企业
      this.closeEvent(false, {type:'qj', data: { table: this.NotReported.tableData }})
    },
    closeEvent_(){
      this.closeEvent(false,{type:'goback', data: {}})
    },
    // 统一密码
    queryEvent() {
      this.NotReported.tableData.forEach(item =>{
        item.pwd.val = this.form.password
      })
    },
    editEvent(rowData) {
      const {key} = rowData
      this.NotReported.tableData.forEach(item=>{
        if(item.key == key){
          item.pwd.disabled = false
        }
      })
    },
    deleteEvent(rowData){
      const {key} = rowData
      const tempArr = []
      this.NotReported.tableData.forEach(item=>{
        if(item.key !== key){
          tempArr.push(item)
        }
      })
      this.NotReported.tableData = tempArr
    },
  },
  }
</script>
<style lang='less'>
.Fill-Unified-Password-con{
  width: 100%;
  // height: 380px;
  display: flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction: column;
  padding: 10px 0;

  .declare-data-item{
    width: 100%;
    padding: 5px 0;
    &.tip-con{
      padding: 5px 50px;
    }
    &.btn-group{
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 5px 300px;
    }
  }
}
</style>
